<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rui 样例测试</title>
	<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
	<script src="rui.js"></script>
	<link rel="stylesheet" href="rui.min.css">
<!--	<link rel="stylesheet" href="select/select.css">-->
</head>
<body>
<style>
	.box {
		padding: 20px;
	}
</style>

<div class="box" id="maskDom">
	<h1 onclick="$.ruix.mask('#maskDom');">h1 大标题</h1>
	<h2>h2 大标题</h2>
	<h3>h3 大标题</h3>
	<h4>h4 大标题</h4>
	<h5>h5 大标题</h5>
	<small>small 小字</small>
	<br>
	<strong>strong 加粗</strong>
	<br>
	<abbr title="sdfsdf">参数?</abbr>
	<br>
	<blockquote>
		<small>引用来源?</small>
		引用的具体内容
	</blockquote>
	<code>代码</code>
	<pre>长代码</pre>
	<hr>
</div>

<div class="box">
	<h5>默认表格</h5>
	<table>
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格内容</td>
			<td>单元格内容</td>
			<td>单元格内容</td>
		</tr>
	</table>

	<h5>rTable 样式</h5>
	<table class="rTable">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格内容</td>
			<td>单元格内容 <i class="ionicons">&#xf216;</i><i class="ionicons">&#xf48b;</i><i class="ionicons">&#xf359;</i> </td>
			<td>单元格内容 <i class="iconfont">&#xf0091;</i> s</td>
		</tr>
	</table>
</div>

<hr>

<div class="box">
	<form action="">
		<fieldset>
			<legend>表单分组<small>sdf</small></legend>
			<table class="formTable">
				<tr>
					<th><span>*</span>用户名：</th>
					<td>
						<input type="text" placeholder="placeholder">
						<small>这里是业务说明，根据需要<a href="javascript://" rel="tooltip" title="这里是tooltip的说明">这里是tooltip</a>选用</small>
					</td>
				</tr>
				<tr>
					<th><span>*</span>密码：</th>
					<td>
						<input type="password" placeholder="placeholder" class="error"><a href="javascript://" rel="tooltip" title="这里是tooltip的说明" class="ionicons">&#xf35b;</a>
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th><span>*</span>角色：</th>
					<td>
						<div class="icheck_box">
							<input type="checkbox" id="check1" class="rCheck" checked><label for="check1">超级管理员</label>
							<input type="checkbox" id="check2" class="rCheck" ><label for="check2">系统管理员</label>
							<input type="checkbox" id="check3" class="rCheck" ><label for="check3">内容采编员</label>
						</div>
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th>性别：</th>
					<td>
						<input type="radio" name="sex" id="radio1" class="rCheck" checked><label for="radio1">男性</label>
						<input type="radio" name="sex" id="radio2" class="rCheck"><label for="radio2">女性</label>
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th>是否开启超神模式：</th>
					<td>
						<input type='checkbox' name='opt1' id='opt1' value='1' class='rSwitch' checked='checked' />
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th>是否开启超神模式222：</th>
					<td>
						<input type='checkbox' name='opt2' id='opt2' value='1' class='rSwitch' />
					</td>
				</tr>
			</table>
		</fieldset>
		<fieldset>
			<legend>表单分组2</legend>
			<table class="formTable">
				<tr>
					<th><span>*</span>密保问题：</th>
					<td>
						<select name="select" class="rSelect">
						  <option>你的中学在哪所学校读的？</option>
						  <option>你爱人的生日是几号(数字)？</option>
						  <option>你最喜欢的歌手是谁？</option>
						</select>
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th><span>*</span>密保答案：</th>
					<td>
						<input type="text" placeholder="placeholder">
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th><span>*</span>测试rSelect：</th>
					<td>
						<select name="rSelect" class="rSelect">
						  <option>你的中学在哪所学校读的？</option>
						  <option>你爱人的生日是几号(数字)？</option>
						  <option>你最喜欢的歌手是谁？</option>
						</select>
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
				<tr>
					<th><span>*</span>备注：</th>
					<td>
						<textarea name="" id="" cols="30" rows="10"></textarea>
						<small>这里是业务说明，根据需要选用</small>
					</td>
				</tr>
			</table>
		</fieldset>
		<fieldset class="formBtn">
			<legend>表单分组2</legend>
			<table class="formTable">
				<tr>
					<th></th>
					<td>
						<input type="button" class="btn btn-blue" value="提交">
						<input type="button" class="btn" value="重置">
					</td>
				</tr>
			</table>
		</fieldset>
	</form>
</div>

<hr>

<div class="box">
	<h5>Label</h5>
	<span class="label">默认</span>
	<span class="label label-blue">蓝色</span>
	<span class="label label-red">红色</span>
	<span class="label label-green">绿色</span>
	<span class="label label-yellow">黄色</span>
	<span class="label label-purple">紫色</span>
</div>

<hr>


<div class="box">
	<h5>按钮</h5>
	<input type="button" value="默认" class="btn">
	<input type="button" value="蓝色" class="btn btn-blue">
	<input type="button" value="绿色" class="btn btn-green">
	<input type="button" value="黄色" class="btn btn-yellow">
	<input type="button" value="红色" class="btn btn-red">
	<input type="button" value="紫色" class="btn btn-purple">
	<input type="button" value="链接" class="btn btn-link">
	<input type="button" value="禁用" class="btn btn-disabled">
	<input type="button" value="迷你" class="btn btn-mini">
	<input type="button" value="h44px" class="btn btn-h44">
	<input type="button" value="h32px" class="btn btn-h32">
	<input type="button" value="h30px" class="btn btn-h30">
	<input type="button" value="超小mini h22px" class="btn btn-h22">
	<button type="button" class="btn-close"><span aria-hidden="true">&times;</span></button>
	<br><br>
	<input type="button" value="宽度100%" class="btn btn-blue btn-block btn-h44">
	<h5>按钮组</h5>
	<div class="btn-group">
		<input type="button" value="蓝色" class="btn btn-blue">
		<input type="button" value="蓝色" class="btn btn-blue">
		<input type="button" value="蓝色" class="btn btn-blue">
	</div>
</div>





<script>
	$.rui.msg('提示消息(模态，3秒消失，正常状态)', true);
//	$.ruix.select();
	
	
	
	$.extend({
		r01: function(){
			console.log('r01');
		},
		r02: function(){
			console.log('r02');
		}
	})
	
	$('h1').on('click', function(){
		$.rui.msg('sdfs', false, true)
	})
	
</script>
			
</body>
</html>